<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        var select = document.querySelector('select');
        var list = document.querySelector('ul');
        var h1 = document.querySelector('h1');

        select.onchange = function () {
            var choice = select.value;

            // ADD CONDITIONAL HERE
            var days;
            if (choice == "January" || choice == "March" || choice == "May" || choice == "July" || choice ==
                "August" || choice == "October" || choice == "December") {
                days = 31;
            } else if (choice == "April" || choice == "June" || choice == "September" || choice == "November") {
                days = 30;
            } else {
                days = 28;
            }

            createCalendar(days, choice);
        }

        function createCalendar(days, choice) {
            list.innerHTML = '';
            h1.textContent = choice;
            for (var i = 1; i <= days; i++) {
                var listItem = document.createElement('li');
                listItem.textContent = i;
                list.appendChild(listItem);
            }
        }

        createCalendar(31, 'January');


        var select = document.querySelector('select');
        var html = document.querySelector('.output');

        select.onchange = function () {
            var choice = select.value;

            // ADD SWITCH STATEMENT
            switch (choice) {
                case 'white':
                    update('white', 'black');
                    break;
                case 'black':
                    update('black', 'white');
                    break;
                case 'purple':
                    update('purple', 'white');
                    break;
                case 'yellow':
                    update('yellow', 'white');
                    break;
                case 'psychedelic':
                    update('psychedelic', 'black');
                    break;
            }
        }

        function update(bgColor, textColor) {
            html.style.backgroundColor = bgColor;
            html.style.color = textColor;
        }
    </script>
</body>

</html>